<!-- 页头 -->
<page-header-wrapper [title]="'数据报表'"></page-header-wrapper>
<div nz-row [nzGutter]="16">
  <div nz-col class="gutter-row" [nzSpan]="6">
    <g2-card [title]="'客户预存款总额'" [bordered]="true" [total]="'¥ 126,560.00'" [footer]="footer" contentHeight="46">
      <ng-template #footer>
        <g2-mini-area line color="#cceafe" height="45" [data]="visitData" (clickItem)="handleClick($event)">
        </g2-mini-area>
      </ng-template>
    </g2-card>
  </div>
  <div nz-col class="gutter-row" [nzSpan]="6">
    <g2-card [title]="'业绩量总额'" [bordered]="true" [total]="'¥ 126,560.00'" [footer]="footer" contentHeight="46">
      <ng-template #footer>
        <g2-mini-area line color="#cceafe" height="45" [data]="visitData" (clickItem)="handleClick($event)">
        </g2-mini-area>
      </ng-template>
    </g2-card>
  </div>
  <div nz-col class="gutter-row" [nzSpan]="6">
    <g2-card [title]="'司机应付总额'" [bordered]="true" [total]="'¥ 126,560.00'" [footer]="footer" contentHeight="46">
      <ng-template #footer>
        <g2-mini-area line color="#cceafe" height="45" [data]="visitData" (clickItem)="handleClick($event)">
        </g2-mini-area>
      </ng-template>
    </g2-card>
  </div>
  <div nz-col class="gutter-row" [nzSpan]="6">
    <g2-card [title]="'附加费总额'" [bordered]="true" [total]="'¥ 126,560.00'" [footer]="footer" contentHeight="46">
      <ng-template #footer>
        <g2-mini-area line color="#cceafe" height="45" [data]="visitData" (clickItem)="handleClick($event)">
        </g2-mini-area>
      </ng-template>
    </g2-card>
  </div>
</div>
<div nz-row [nzGutter]="16">
  <div nz-col class="gutter-row" [nzSpan]="12">
    <nz-card [nzTitle]="'订单类型比例'">
      <g2-custom delay="100" (render)="render($event)"></g2-custom>
    </nz-card>
  </div>
  <div nz-col class="gutter-row" [nzSpan]="12">
    <nz-card [nzTitle]="'大区业绩完成情况'">
      <g2-timeline
    [data]="chartData"
    [titleMap]="{ y1: '客流量', y2: '支付笔数' }"
    [height]="200"
    mask="MM月DD日"
    [slider]="false"
  ></g2-timeline>
    </nz-card>
  </div>
</div>
<div nz-row [nzGutter]="16">
  <div nz-col class="gutter-row" [nzSpan]="12">
    <nz-card [nzTitle]="'运单直付比例'">
      <g2-pie #pie title="销售额" subTitle="销售额" [total]="total" [valueFormat]="format" [data]="salesPieData" height="294"
      (clickItem)="handleClick($event)" [lineWidth]="10">
      </g2-pie>
    </nz-card>
  </div>
  <div nz-col class="gutter-row" [nzSpan]="12">
    <nz-card [nzTitle]="'业绩完成情况'">
      <g2-bar height="200" [title]="'销售额趋势'" [data]="salesData" (clickItem)="handleClick($event)"></g2-bar>

    </nz-card>
  </div>
</div>